<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="tab-nav">
			<view class="nav-item" :class="navItem == 1 ? 'active' : ''">基本信息填写</view>
			<view class="nav-item" :class="navItem == 2 ? 'active' : ''">正文内容填写</view>
		</view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<block v-if="navItem == 1">
					<u-form-item class="form-item" required label="标题" labelAlign="left" label-width="190" prop="title">
						<u-input v-model="form.title" type="text" placeholder="请输入标题" />
					</u-form-item>
					<u-form-item class="form-item" required label="发言类型" labelAlign="left" label-width="190" prop="type">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择类别" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" required label="发言分类" labelAlign="left" label-width="190" prop="classification">
						<u-input v-model="classification" type="select" :select-open="classificationShow" placeholder="请选择分类" @click="classificationShow = true" />
						<u-select :list="classificationList" v-model="classificationShow" @confirm="classificationConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" required label="会议类型" labelAlign="left" label-width="190" prop="conferenceType">
						<u-input v-model="conferenceType" type="select" :select-open="conferenceTypeShow" placeholder="请选择分类" @click="conferenceTypeShow = true" />
						<u-select :list="conferenceTypeList" v-model="conferenceTypeShow" @confirm="conferenceTypeConfirm"></u-select>
					</u-form-item>

					<!-- 发言人 -->
					<u-form-item
						class="form-item"
						required
						label="发言人"
						labelAlign="left"
						label-width="190"
						v-if="$roleCodes('sys_manager') || ($roleCodes('perform_allpermissions') || $roleCodes('fydw'))"
					>
						<u-input v-model="waihotsName" type="select" :select-open="waihotsShow" placeholder="请选择发言人" @click="waihotsShow = true" />
						<select-tree
							ref="waihotstree"
							:show="waihotsShow"
							:range="waihotsList"
							:selected="waihotsStr"
							:multiple="false"
							:selectParent="false"
							@confirm="treeConfirm($event, 'waihots')"
							@cancel="treeCancel($event, 'waihots')"
						></select-tree>
					</u-form-item>
					<u-form-item class="form-item" required label="发言人" labelAlign="left" label-width="190" v-else>
						<u-input disabled v-model="userName" type="text" placeholder="请输入发言人" />
					</u-form-item>
					<u-form-item class="form-item" required label="联系电话" labelAlign="left" label-width="190" prop="phone">
						<u-input v-model="form.phone" type="text" placeholder="请输入联系电话" />
					</u-form-item>

					<u-form-item class="form-item" required label="单位类型" labelAlign="left" label-width="190">
						<u-input v-model="reflectUnitType" type="select" :select-open="refTypeShow" placeholder="请选择单位类型" @click="selectShow('refTypeShow')" />
						<u-select :list="refTypeList" v-model="refTypeShow" @confirm="refTypeConfirm"></u-select>
					</u-form-item>

					<u-form-item class="form-item" required label="所属单位" labelAlign="left" label-width="190" prop="reflectUnit">
						<u-input v-model="reflectUnit" type="select" :select-open="reflectUnitShow" placeholder="请选择所属单位" @click="selectShow('reflectUnitShow')" />
						<u-select :list="reflectUnitList" v-model="reflectUnitShow" @confirm="reflectUnitConfirm"></u-select>
					</u-form-item>

					<u-form-item class="form-item" label="单位职务" labelAlign="left" label-width="190">
						<u-input v-model="form.position" type="text" placeholder="请输入单位及职务" />
					</u-form-item>
				</block>
				<block v-else>
					<u-form-item class="form-item" required label="发言内容" labelAlign="left" label-width="190" prop="content">
						<u-input v-model="form.content" type="textarea" placeholder="请输入正文内容" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>

					<view class="ocr-box">
						<view class="ocr" @click="ocrTo('image', 'content')">
							<image src="/static/img/icon_90.png" mode="widthFix"></image>
							<view>图片识别</view>
						</view>
						<view class="ocr" @click="ocrTo('audio', 'content')">
							<image src="/static/img/icon_91.png" mode="widthFix"></image>
							<view>文字识别</view>
						</view>
					</view>

					<u-form-item class="form-item" label="上传文件" labelAlign="left" label-width="190"><uni-file-upload width="500rpx"></uni-file-upload></u-form-item>
				</block>
			</u-form>
		</view>

		<view class="fiexd-btm">
			<u-button class="form-btn" v-if="navItem == 1" type="error" @click="confirm">下一步</u-button>
			<view v-else :class="$sysMenus('hyfy_top_draft') ? 'flex-box' : ''">
				<u-button class="form-btn" type="primary" @click="confirm">提交</u-button>
				<u-button class="form-btn" type="success" @click="spare" v-if="$sysMenus('hyfy_top_draft')">草稿</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import uniFileUpload from '@/components/uni-file-uploader.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniFileUpload,
		dateTimePicker,
		selectTree
	},
	data() {
		return {
			id: '',
			title: '提交会议发言',
			navItem: 1,
			ocrKey: '',
			disabled: false,

			timer: '',
			userName: '',

			reflectUnit: '',
			reflectUnitShow: false,
			reflectUnitList: [],

			reflectUnitType: '',
			refTypeShow: false,
			refTypeList: [],

			type: '',
			typeShow: false,
			typeList: [],

			conferenceType: '',
			conferenceTypeShow: false,
			conferenceTypeList: [],

			classification: '',
			classificationShow: false,
			classificationList: [],

			waihotsIds: [],
			waihotsName: '',
			waihotsShow: false,
			waihotsList: [],
			waihotsStr: '',

			teamType: '1',
			dictType: '',
			form: {
				id: null,
				title: null,
				type: null,
				conferenceType: null,
				classification: null,
				status: '1',
				phone: null,
				jiebie: null,
				createBy: null,
				reflectUnit: null,
				reflectUnitType: null,
				spokesMan: null,
				recommendedBy: null,
				position: null,
				content: null
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				type: [
					{
						required: true,
						message: '请选择发言类型',
						trigger: 'change'
					}
				],
				classification: [
					{
						required: true,
						message: '请选择发言分类',
						trigger: 'change'
					}
				],
				conferenceType: [
					{
						required: true,
						message: '请选择会议类型',
						trigger: 'change'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入联系电话',
						trigger: 'change'
					}
				],
				reflectUnit: [
					{
						required: true,
						message: '请选择所属单位',
						trigger: 'change'
					}
				],
				content: [
					{
						required: true,
						message: '请输入正文内容',
						trigger: 'change'
					}
				]
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.loadDict('hyfy_type', 'typeList');
		this.loadDict('hyfy_conference_type', 'conferenceTypeList');
		this.loadDict('hyfy_classification', 'classificationList');
		this.loadDict('reflect_unit_type', 'refTypeList');
		this.loadTeam('weiyuan, changwei');
		if (option && option.id) {
			this.id = option.id;
			if (option.type == 'spare') {
				this.title = '修改会议发言';
				this.spareData();
			}
		}

		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.userName = this.userInfo.sysUser.userName;
				this.form.createBy = this.userInfo.sysUser.id;
				this.form.spokesMan = this.userInfo.sysUser.id;
				this.form.phone = this.userInfo.userInfo.phoneNumber;
				this.form.position = this.userInfo.userInfo.position;
				this.form.jiebie = this.userInfo.userInfo.jiebie;
			} else {
				this.$logout();
			}
		},
		selectShow(e) {
			if (this.disabled) {
				return false;
			}
			this[e] = true;
		},
		treeConfirm(e, type) {
			if (!e || e.length == 0) {
				this[type + 'Show'] = false;
				this[type + 'Name'] = '';
				this[type + 'Ids'] = [];
				return false;
			}
			if (type == 'waihots') {
				this[type + 'Ids'] = e[0].id;
				this[type + 'Name'] = e[0].name;
				this[type + 'Show'] = false;
				this.form.spokesMan = e[0].id;
				this.form.phone = e[0].phone;
				this.form.position = e[0].position;
				this.form.jiebie = e[0].jiebieName;
			} else {
				this[type + 'Ids'] = [];
				let names = [];
				let i = 0;
				if (e.length > 0) {
					e.forEach(item => {
						this[type + 'Ids'].push(item.id);
						if (i < 3) {
							names.push(item.name);
							i++;
						}
					});
					this[type + 'Name'] = names.join(',') + '等' + e.length + '人';
				}
				this[type + 'Show'] = false;
			}
		},
		treeCancel(e, type) {
			this[type + 'Show'] = false;
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form.type = e[0].value;
		},
		conferenceTypeConfirm(e) {
			this.conferenceType = e[0].label;
			this.form.conferenceType = e[0].value;
		},
		classificationConfirm(e) {
			this.classification = e[0].label;
			this.form.classification = e[0].value;
		},
		reflectUnitConfirm(e) {
			this.reflectUnit = e[0].label;
			this.form.reflectUnit = e[0].value;
		},
		refTypeConfirm(e) {
			this.reflectUnitType = e[0].label;
			this.form.reflectUnitType = e[0].value;
			this.reflectUnit = '';
			this.form.reflectUnit = null;
			this.loadDict('reflect_unit_type_' + e[0].value, 'reflectUnitList');
		},
		loadDict(type, list, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then(res => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach(item => {
					this[list].push({
						value: item.dictValue,
						label: item.dictName
					});
					if (value && value == item.dictValue) {
						this.secType = item.dictName;
					}
					let unit2 = this.userInfo.sysUser.remark1;
					let unit1 = unit2 && unit2.split('_')[0];
					if (type == 'reflect_unit_type' && unit2) {
						if (unit1 == item.dictValue) {
							this.reflectUnitType = item.dictName;
							this.form.reflectUnitType = item.dictValue;
							this.loadDict('reflect_unit_type_' + item.dictValue, 'reflectUnitList');
						}
					}
					if (type.indexOf('reflect_unit_type_') != -1 && unit2) {
						if (unit2 == item.dictValue) {
							if (this.$roleCodes('fydw')) this.disabled = true;
							this.reflectUnit = item.dictName;
							this.form.reflectUnit = item.dictValue;
							this.form.remark1 = unit2;
						}
					}
				});
			});
		},
		spareData() {
			this.$request('/huiyifayan/conference-speech/detail', {
				id: this.id
			}).then(res => {
				// Object.assign(this.form, res.data.conferenceSpeech);
				Object.keys(this.form).forEach(key => (this.form[key] = res.data.conferenceSpeech[key]));
				this.$store.commit('filePush', res.data.fileList);
				this.waihotsStr = res.data.bySysUserId.sysUserId;
				this.waihotsName = res.data.bySysUserId.userName;
				this.form.status = '1';
				if (!this.form.position) this.form.position = res.data.bySysUserId.position;

				let regx = /<[^>]*>|<\/[^>]*>/gm;
				if (res.data.conferenceSpeech.content) {
					this.form.content = res.data.conferenceSpeech.content.replace(regx, '');
				}

				this.typeList.forEach(item => {
					if (res.data.conferenceSpeech.type == item.value) {
						this.type = item.label;
					}
				});

				this.classificationList.forEach(item => {
					if (res.data.conferenceSpeech.classification == item.value) {
						this.classification = item.label;
					}
				});

				this.conferenceTypeList.forEach(item => {
					if (res.data.conferenceSpeech.conferenceType == item.value) {
						this.conferenceType = item.label;
					}
				});

				let unitName = res.data.conferenceSpeech.recommendedByName;
				let unit2 = res.data.conferenceSpeech.recommendedBy;
				let unit1 = unit2 && unit2.split('_')[0];
				this.refTypeList.forEach(item => {
					if (unit1 == item.value) {
						this.reflectUnitType = item.label;
						this.form.reflectUnitType = item.value;
						this.loadDict('reflect_unit_type_' + unit1, 'reflectUnitList');
					}
				});

				this.reflectUnit = unitName;
				this.form.reflectUnit = unit2;
			});
		},
		loadTeam(type) {
			if (this.$roleCodes('zhuanweihui') || this.$roleCodes('xiaozuguanliyuan')) {
				this.teamType = '2';
			}
			if (this.$roleCodes('dangpai')) {
				this.teamType = '3';
				this.dictType = 'dangpai';
			}
			this.$request('/system/sys-user/team_users', {
				clientCode: this.clientCode,
				currentUserId: this.userId,
				fromModule: 'perform',
				dictType: this.dictType,
				roleCodes: type,
				teamType: this.teamType
			}).then(res => {
				if (res.data) {
					this.waihotsList = res.data;
				}
			});
		},
		onEditorReady(edit) {
			this.$refs.editor
				.context(res => {
					this[edit] = res.context;
				})
				.exec();
		},
		spare() {
			this.form.status = '0';
			this.confirm();
		},
		ocr(key) {
			this.ocrKey = key;
		},
		ocrTo(e, key) {
			this.ocrKey = key;
			uni.navigateTo({
				url: '/pagesB/ocr/index?ocrKey=' + this.ocrKey + '&type=' + e
			});
		},
		confirm() {
			if (this.navItem == 1) {
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false;
					} else if (!this.waihotsIds) {
						this.$msg('请选择发言人');
						return false;
					} else {
						this.navItem = 2;
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
					}
				});
			} else {
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false;
					} else {
						let data = {};
						this.form.clientCode = this.clientCode;
						this.form.recommendedBy = this.form.reflectUnit;

						data = {
							conferenceSpeech: this.form,
							file: this.fileList
						};

						this.$request('/huiyifayan/conference-speech/add', data, {
							load: true
						}).then(res => {
							this.$msg(res.msg);
							setTimeout(() => {
								let pre = this.$prePage();
								if (pre && pre.loadData) {
									pre.loadData('refresh');
								}
								uni.navigateBack();
							}, 500);
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.form-box {
	.form-item {
		display: block;
		padding: 0 30rpx;
		border-bottom: 20rpx solid #f5f7fa;
	}

	.form-checkbox {
		// padding: 8rpx 0;
		margin: -8rpx 0;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
